<!--
 * @Author: Liang
 * @LastEditors: Liang
-->
<template>
  <div class="login-box">
    <div class="form-box">
      <div class="title">便利店管理系统</div>
      <h2>用户登录</h2>
      <Form ref="loginform" :model="formData" :rules="rules">
        <FormItem prop="id">
          <Input type="text" v-model="formData.id" placeholder="请输入用户名" />
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formData.password" placeholder="请输入密码" />
        </FormItem>
        <FormItem prop="code">
          <Input style="width: 50%" v-model="formData.code" placeholder="请输入验证码" @on-enter="login"></Input>
          <ValidateCode ref="validateCode" class="code-box"></ValidateCode>
        </FormItem>
        <Button type="primary" @click="login">登录</Button>
      </Form>
    </div>
  </div>
</template>

<script>
import ValidateCode from './handleLogin/ValidataCode.vue'
import {mapActions} from 'vuex'
import {setKey} from '@/utils/utils'
import {rules} from './js/rules'

export default {
  components: {
    ValidateCode,
  },
  data () {
    return {
      formData: {
        id: '',
        password: '',
        code: ''
      },
      rules: rules(this)
    }
  },
  methods: {
    login () {
      this.$refs['loginform'].validate((valid) => {
        if (valid) {
          this._submitFrom()
        }
      })
    },
    async _submitFrom () {
      const url = '/login'
      const res = await this.GET_DATA({
        dataUrl: url,
        id: this.formData.id,
        password: this.$handleEncrypt(this.formData.password)
        // password: this.formData.password
      })
      if (res) {
        if (res.code == '0000') {
          setKey('userinfo', res.data)
          setKey('token', res.data.token)
          this.$store.commit('SET_USER', res.data)
          this.$successMessage('登录成功')
          this.$router.push({ name: "home" })
          this.$store.dispatch('getCategoryList', this.$store.state.userModule.user.username)
        } else {
          this.$warnMessage('登录成功')
        }
      }
    },
    ...mapActions({
      GET_DATA: "_GET_DATA"
    }),
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  background-image: url('../../assets/images/login.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: scroll;
  overflow-y:hidden;
  overflow-x: hidden;
  width:100vw;
  height:100vh;
  position: relative;
}
.title {
  font-size: 52px;
  opacity: 0.8;
  font-weight: bold;
  text-align: center;
  padding-bottom: 30px;
}
.form-box {
  vertical-align: middle;
  background-color: #fff;
  width: 500px;
  padding: 50px;
  border-radius: 20px;
  margin:10vh auto;
}

</style>